<template>
  <div class="box8">
    <div class="title">
      <p>机器人统计</p>
      <img src="../../images/dataScreen-title.png" alt="" />
    </div>
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import { RobotApi } from "@/api/map/typecount";
//获取DOM节点
let charts = ref();
//组件挂载完毕
onMounted(async () => {
  //容器
  let mychart = echarts.init(charts.value);
  // var data1 = [
  //   "智能盘点机器人",
  //   "智能还书系统",
  //   "智能导览机器人",
  //   "故障",
  //   "维修",
  // ];
  // var data2 = [
  //   {
  //     value: 50,
  //     name: "维修",
  //   },
  //   {
  //     value: 60,
  //     name: "故障",
  //   },
  //   {
  //     value: 80,
  //     name: "智能导览机器人",
  //   },
  //   {
  //     value: 100,
  //     name: "智能还书系统",
  //   },
  //   {
  //     value: 90,
  //     name: "智能盘点机器人",
  //   },
  // ];
  var colorList = [
    {
      c1: " #ECE833",
      c2: "#ECE833",
    },
    {
      c1: "#FC9424",
      c2: "#FC9424",
    },
    {
      c1: "#23C6D5",
      c2: "#23C6D5",
    },
    {
      c1: "#2986F7",
      c2: "#2986F7",
    },
    {
      c1: " #B06DF6",
      c2: "#B06DF6",
    },
  ];
  // 获取后端数据
  const res = await RobotApi.getRobotTypeCount(null);
  //console.log(res, "getRobotTypeCount");

  // 处理数据
  const data1 = res.map((item) => item.name); // 提取名称用于 legend
  const data2 = res.map((item) => ({
    name: item.name,
    value: item.num,
  }));
  // console.log(res, "getRobotTypeCount");

  let option = {
    legend: {
      formatter: function (name) {
        var data = option.series[0].data;
        var tarValue;
        for (var i = 0; i < data.length; i++) {
          if (data[i].name == name) {
            tarValue = data[i].value;
          }
        }
        return `   ${name}     ${tarValue}`; // 返回实际的数值，而不是百分比
      },
      orient: "vertical",
      left: "58%",
      top: "25%",
      itemWidth: 10, // 设置正方形的宽度
      itemHeight: 10, // 设置正方形的高度
      data: data1,
      textStyle: {
        color: "#fff",
      },
      itemGap: 28,
      icon: "rect",
    },

    series: [
      {
        name: "机器人统计",
        type: "pie",
        radius: ["20%", "65%"],
        center: ["30%", "45%"],
        data: data2,
        roseType: "radius",
        startAngle: 90,
        label: {
          show: false,
        },
        avoidLabelOverlap: false, // 避免标签重叠
        itemStyle: {
          normal: {
            color: function (params) {
              return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                {
                  offset: 0,
                  color: colorList[params.dataIndex].c1,
                },
                {
                  offset: 1,
                  color: colorList[params.dataIndex].c2,
                },
              ]);
            },
          },
        },
      },
    ],
  };

  // 设置配置项
  mychart.setOption(option);
});
</script>

<style scoped lang="scss">
.box8 {
  width: 100%;
  height: 100%;
  background: url(../../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 92%;
  margin-top: 10px;

  .title {
    p {
      color: white;
      font-size: 18px;
    }
  }

  .charts {
    height: calc(100% - 14.3px);
  }
}
</style>
